<template>
  <div id="p3-contractRecord">
    <div class="p3-title">
      <img src="../../assets/img/jiaoyijilu.png" alt />
      <div>
        <p>交易记录</p>
        <p>查询交易记录</p>
      </div>
    </div>
    <div id="order-tablelist">
      <el-tabs v-model="activeName">
        <el-tab-pane label="持有仓位" name="first">
          <el-table
            v-loading="historyListLoad"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            v-if="token!=''"
            :data="holdList"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="contractName" label="合约" min-width="80"></el-table-column>
            <el-table-column prop="createTime" label="建仓时间" min-width="120"></el-table-column>
            <el-table-column prop="openWarehousePrice" label="建仓价格(USDT)" min-width="120"></el-table-column>
            <el-table-column prop="amount" label="持仓量(张)" min-width="100"></el-table-column>
            <el-table-column prop="earnestMoney" label="保证金(USDT)" min-width="100"></el-table-column>
            <el-table-column prop=" " label="浮动盈亏(USDT)" min-width="150">
              <template slot-scope="scope">
              <div v-if="scope.row.direction==0?true:false">
                <div v-for="(v,i) in agreeList" :key="i">
                  <span
                    v-show="(scope.row.contractName.split('/')[0] || '').split('/')[0]==v.childCoinName
                ?true:false"
                  >{{((v.close-scope.row.openWarehousePrice)*scope.row.unit*scope.row.amount).toFixed(3)}}</span>
                </div>
              </div>
              <div v-else>
                <div v-for="(v,i) in agreeList" :key="i">
                  <span
                    v-show="(scope.row.contractName.split('/')[0] || '').split('/')[0]==v.childCoinName
                ?true:false"
                  >{{((scope.row.openWarehousePrice-v.close)*scope.row.unit*scope.row.amount).toFixed(3)}}</span>
                </div>
              </div>
            </template>
            </el-table-column>
            <el-table-column prop label="操作" min-width="150">
              <template slot-scope="scope">
                <el-button size="mini" @click.native="handHold(scope.row)" type="danger">平仓</el-button>
                <el-popover placement="right" width="400" trigger="hover">
                  <div>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      size="mini"
                      v-model="hold.takeProfit"
                      placeholder="止盈价"
                    ></el-input>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="margin:10px 0"
                      size="mini"
                      v-model="hold.stopLoss"
                      placeholder="止损价"
                    ></el-input>
                    <div>
                      <el-button
                        :loading="modifyHoldStatus"
                        @click.native="modifyHold(scope.row)"
                        style="width:100%"
                        size="mini"
                        type="primary"
                      >修改止盈止损</el-button>
                    </div>
                  </div>
                  <el-button size="mini" slot="reference">止盈止损</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item label="止盈止损(USDT)">
                    <span>{{props.row.takeProfit || '--'}}/{{props.row.stopLoss || '--'}}</span>
                  </el-form-item>
                  <el-form-item label="建仓方向">
                    <span>{{props.row.tradeTypeName}}-{{props.row.directionName}}</span>
                  </el-form-item>
                  <el-form-item label="建仓倍率">
                    <span>{{props.row.multiple}}</span>
                  </el-form-item>
                  <el-form-item label="手续费(USDT)">
                    <span>{{props.row.openFee}}</span>
                  </el-form-item>
                  <el-form-item label="利息(USDT)">
                    <span>{{props.row.overnightFee}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="login-to">
            <div>
              <span>登陆</span>
              <span>注册</span>
            </div>
            <p>登录/注册后进行交易</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="已平仓" name="second">
          <el-table
            v-loading="closeListLoad"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            v-if="token!=''"
            :data="closeList"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="contractName" label="合约" min-width="80"></el-table-column>
            <el-table-column prop="closeTypeName" label="平仓类型" min-width="100"></el-table-column>
            <el-table-column prop="closeTime" label="平仓时间" min-width="120"></el-table-column>
            <el-table-column prop="openWarehousePrice" label="建仓价格(USDT)" min-width="100"></el-table-column>
            <el-table-column prop="amount" label="平仓量(张)" min-width="100"></el-table-column>
            <el-table-column prop="earnestMoney" label="保证金(USDT)" min-width="150"></el-table-column>
            <el-table-column prop="delaySeconds" label="止盈止损(USDT)" min-width="120">
              <template
                slot-scope="scope"
              >{{scope.row.takeProfit || '--'}}/{{scope.row.stopLoss || '--'}}</template>
            </el-table-column>

            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item label="建仓方向">
                    <span>{{props.row.tradeTypeName}}-{{props.row.directionName}}</span>
                  </el-form-item>
                  <el-form-item label="建仓倍率">
                    <span>{{props.row.multiple}}</span>
                  </el-form-item>
                  <el-form-item label="建仓时间">
                    <span>{{props.row.createTime}}</span>
                  </el-form-item>
                  <el-form-item label="平仓价格">
                    <span>{{props.row.closeWarehousePrice}}</span>
                  </el-form-item>
                  <el-form-item label="盈亏">
                    <span>{{props.row.profit}}</span>
                  </el-form-item>
                  <el-form-item label="手续费(USDT)">
                    <span>{{props.row.closeFee}}</span>
                  </el-form-item>
                  <el-form-item label="利息(USDT)">
                    <span>{{props.row.overnightFee}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="login-to">
            <div>
              <span>登陆</span>
              <span>注册</span>
            </div>
            <p>登录/注册后进行交易</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="当前委托" name="third">
          <el-table
            v-loading="curentListLoad"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            v-if="token!=''"
            :data="curentList"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="contractName" label="合约" min-width="100"></el-table-column>
            <el-table-column prop="price" label="委托价格(USDT)" min-width="100"></el-table-column>
            <el-table-column prop="amount" label="委托数量(张)" min-width="100"></el-table-column>
            <el-table-column prop label="方向" min-width="100">
              <template slot-scope="scope">{{scope.row.tradeTypeName}}-{{scope.row.directionName}}</template>
            </el-table-column>
            <el-table-column prop="multiple" label="建仓倍率" min-width="100"></el-table-column>
            <el-table-column prop="delaySeconds" label="止盈止损(USDT)" min-width="120">
              <template
                slot-scope="scope"
              >{{scope.row.takeProfit || '--'}}/{{scope.row.stopLoss || '--'}}</template>
            </el-table-column>
            <el-table-column prop label="操作" min-width="180">
              <template slot-scope="scope">
                <el-button size="mini" @click.native="remove(scope.row)" type="danger">撤单</el-button>
                <el-popover placement="right" width="400" trigger="hover">
                  <div>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      size="mini"
                      v-model="current.takeProfit"
                      placeholder="止盈价"
                    ></el-input>
                    <el-input
                      oninput="value=value.replace(/[^\d.]/g,'')"
                      style="margin:10px 0"
                      size="mini"
                      v-model="current.stopLoss"
                      placeholder="止损价"
                    ></el-input>
                    <div>
                      <el-button
                        :loading="modifyCurrentStatus"
                        @click.native="modifyCurrent(scope.row)"
                        style="width:100%"
                        size="mini"
                        type="primary"
                      >修改止盈止损</el-button>
                    </div>
                  </div>
                  <el-button size="mini" slot="reference">止盈止损</el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item label="委托时间">
                    <span>{{props.row.createTime}}</span>
                  </el-form-item>
                  <el-form-item label="手续费(USDT)">
                    <span>{{props.row.openFee}}</span>
                  </el-form-item>
                  <el-form-item label="保证金(USDT)">
                    <span>{{props.row.earnestMoney}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>    
          </el-table>
          <div v-else class="login-to">
            <div>
              <span>登陆</span>
              <span>注册</span>
            </div>
            <p>登录/注册后进行交易</p>
          </div>
        </el-tab-pane>
        <el-tab-pane label="历史委托" name="fourth">
          <el-table
            v-loading="historyListLoad"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            v-if="token!=''"
            :data="historyList"
            stripe
            style="width: 100%"
          >
            <el-table-column prop="contractName" label="合约" min-width="100"></el-table-column>
            <el-table-column prop="price" label="委托价格(USDT)" min-width="100"></el-table-column>
            <el-table-column prop="amount" label="已成交数量(张)" min-width="100"></el-table-column>
            <el-table-column prop label="方向" min-width="100">
              <template slot-scope="scope">{{scope.row.tradeTypeName}}-{{scope.row.directionName}}</template>
            </el-table-column>
            <el-table-column prop="multiple" label="建仓倍率" min-width="100"></el-table-column>
            <el-table-column prop="delaySeconds" label="止盈止损(USDT)" min-width="120">
              <template
                slot-scope="scope"
              >{{scope.row.takeProfit || '--'}}/{{scope.row.stopLoss || '--'}}</template>
            </el-table-column>
            <el-table-column prop="createTime" label="委托时间" min-width="120"></el-table-column>

            <el-table-column type="expand">
              <template slot-scope="props">
                <el-form label-position="right" inline class="demo-table-expand">
                  <el-form-item label="手续费(USDT)">
                    <span>{{props.row.openFee}}</span>
                  </el-form-item>
                  <el-form-item label="保证金(USDT)">
                    <span>{{props.row.earnestMoney}}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <div v-else class="login-to">
            <div>
              <span>登陆</span>
              <span>注册</span>
            </div>
            <p>登录/注册后进行交易</p>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-pagination
      v-if="activeName=='first'?true:false"
      @current-change="nextPage1"
      style="text-align:center;margin-top:20px;"
      small
      layout="prev, pager, next"
      :total="total1"
      :page-size="8"
    ></el-pagination>
    <el-pagination
      v-if="activeName=='second'?true:false"
      @current-change="nextPage2"
      style="text-align:center;margin-top:20px;"
      small
      layout="prev, pager, next"
      :total="total2"
      :page-size="8"
    ></el-pagination>
    <el-pagination
      v-if="activeName=='third'?true:false"
      @current-change="nextPage3"
      style="text-align:center;margin-top:20px;"
      small
      layout="prev, pager, next"
      :total="total3"
      :page-size="8"
    ></el-pagination>
    <el-pagination
      v-if="activeName=='fourth'?true:false"
      @current-change="nextPage4"
      style="text-align:center;margin-top:20px;"
      small
      layout="prev, pager, next"
      :total="total4"
      :page-size="8"
    ></el-pagination>
  </div>
</template>
<script>
import { mapState } from "vuex";
import {
  contractEntrustList,
  contractWarehouseList,
  contractWarehouseHistory,
  contractWarehouseClose,
  contractEntrustUpdate,
  currentUpdateTakeprofit,
  holdContractWarehouseUpdate
} from "../../api/api";
import qs from "qs";
export default {
  name: "order-tablelist",
  data() {
    return {
      input: "",
      activeName: "first",
      holdList: [],
      holdListLoad: false,
      closeList: [],
      closeListLoad: false,
      curentList: [],
      curentListLoad: false,
      historyList: [],
      historyListLoad: false,
      current: {
        takeProfit: "",
        stopLoss: ""
      },
      modifyCurrentStatus: false,
      hold: {
        takeProfit: "",
        stopLoss: ""
      },
      modifyHoldStatus: false,
      //   ---分页----------------------------
      page1: 1,
      total1: 10,
      page2: 1,
      total2: 10,
      page3: 1,
      total3: 10,
      page4: 1,
      total4: 10
    };
  },
  computed: {
    ...mapState(["token", "contractId","agreeList"])
  },
  created() {
    this.getHold();
    this.getClose();
    this.getCurent();
    this.getHistory();
  },
  methods: {
    // 手动平仓
    handHold(val) {
      this.$confirm("是否确认手动平仓？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var params = {
          token: this.token,
          id: val.id
        };
        contractWarehouseClose(qs.stringify(params)).then(res => {
          if (res.data.code == 200) {
            this.getHold();
            this.getClose();
            this.getCurent();
            this.getHistory();
            this.$store.commit('modifyTime',new Date())
            this.$notify({
              title: "提示",
              message: "平仓成功！",
              type: "success"
            });
          } else {
            this.$notify({
              title: "警告",
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      });
    },
    //撤单
    remove(val) {
      this.$confirm("是否确认撤单？", "", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        var params = {
          token: this.token,
          id: val.id
        };
        contractEntrustUpdate(qs.stringify(params)).then(res => {
          if (res.data.code == 200) {
            this.getHold();
            this.getClose();
            this.getCurent();
            this.getHistory();
            this.$store.commit('modifyTime',new Date())
            this.$notify({
              title: "提示",
              message: "撤单成功！",
              type: "success"
            });
          } else {
            this.$notify({
              title: "警告",
              message: res.data.msg,
              type: "warning"
            });
          }
        });
      });
    },
    //修改止盈止损--当前委托
    modifyCurrent(val) {
      this.modifyCurrentStatus = true;
      var params = {
        token: this.token,
        id: val.id,
        takeProfit: this.current.takeProfit,
        stopLoss: this.current.stopLoss
      };
      currentUpdateTakeprofit(qs.stringify(params)).then(res => {
        this.modifyCurrentStatus = false;
        if (res.data.code == 200) {
          this.getHold();
          this.getClose();
          this.getCurent();
          this.getHistory();
          this.$store.commit('modifyTime',new Date())
          (this.current.takeProfit = ""),
            (this.current.stopLoss = ""),
            this.$notify({
              title: "提示",
              message: "修改成功！",
              type: "success"
            });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    //修改止盈止损--持有仓位
    modifyHold(val) {
      this.modifyHoldStatus = true;
      var params = {
        token: this.token,
        id: val.id,
        takeProfit: this.hold.takeProfit,
        stopLoss: this.hold.stopLoss
      };
      holdContractWarehouseUpdate(qs.stringify(params)).then(res => {
        this.modifyHoldStatus = false;
        if (res.data.code == 200) {
          this.getHold();
          this.getClose();
          this.getCurent();
          this.getHistory();
          this.$store.commit('modifyTime',new Date())
          (this.hold.takeProfit = ""),
            (this.hold.stopLoss = ""),
            this.$notify({
              title: "提示",
              message: "修改成功！",
              type: "success"
            });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.msg,
            type: "warning"
          });
        }
      });
    },
    // ----------------------------------------
    //获取持有仓位
    getHold() {
      this.holdListLoad = true;
      var params = {
        page: this.page1,
        rows: 8,
        token: this.token,
        // contractId: this.contractId
      };
      contractWarehouseList(qs.stringify(params)).then(res => {
        this.holdListLoad = false;
        this.holdList = res.data.data;
        this.total1 = res.data.count;
      });
    },
    //获取平仓
    getClose() {
      this.closeListLoad = true;
      var params = {
        page: this.page2,
        rows: 8,
        token: this.token,
        // contractId: this.contractId
      };
      contractWarehouseHistory(qs.stringify(params)).then(res => {
        this.closeListLoad = false;
        this.closeList = res.data.data;
        this.total2 = res.data.count;
      });
    },
    //获取当前委托
    getCurent() {
      this.curentListLoad = true;
      var params = {
        page: this.page3,
        rows: 8,
        token: this.token,
        // contractId: this.contractId,
        historyIs: 0
      };
      contractEntrustList(qs.stringify(params)).then(res => {
        this.curentListLoad = false;
        this.curentList = res.data.data;
        this.total3 = res.data.count;
      });
    },
    //获取历史委托
    getHistory() {
      this.historyListLoad = true;
      var params = {
        page: this.page4,
        rows: 8,
        token: this.token,
        // contractId: this.contractId,
        historyIs: 1
      };
      contractEntrustList(qs.stringify(params)).then(res => {
        this.historyListLoad = false;
        this.historyList = res.data.data;
        this.total4 = res.data.count;
      });
    },
    // ---------------------------------------
    nextPage1(val) {
      this.page1 = val;
      this.getHold();
    },
    nextPage2(val) {
      this.page2 = val;
      this.getClose();
    },
    nextPage3(val) {
      this.page3 = val;
      this.getCurent();
    },
    nextPage4(val) {
      this.page4 = val;
      this.getHistory();
    }
  }
};
</script>
<style lang='less' scope>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 150px;
  text-align: center;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 100%;
}
//   -----------------
#p3-contractRecord {
  .p3-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 25px;
    > div {
      padding: 0 10px;
      > p:first-child {
        font-size: 15px;
        color: #dcb884;
      }
      > p:last-child {
        font-size: 14px;
        color: #a1b1b0;
        margin-top: 5px;
      }
    }
  }
  #order-tablelist {
    margin: 0 15px;
    min-height: 400px;
    .login-to {
      text-align: center;
      padding: 60px 0;
      font-size: 16px;
      color: #0a9187;
      background-color: #f7f8f8;
      > div {
        margin-bottom: 10px;
        span:first-child {
          border-right: 1px solid #0a9187;
          padding-right: 15px;
          margin-right: 10px;
        }
      }
    }
    // -----------------------
    .el-tabs {
      background-color: #fff;
    }
    .el-tabs__item.is-active {
      color: #0a9187;
    }
    .el-tabs__item:hover {
      color: #0a9187;
    }
    .el-tabs__active-bar {
      background-color: #0a9187;
    }
    .el-table {
      font-size: 12px;
    }
    .el-table td,
    .el-table th {
      padding: 6px 0;
    }
    .el-table__empty-text {
      height: 220px;
      padding-top: 150px;
      font-size: 14px;
      background: url("../../assets/img/zanwushuju.png") no-repeat center center;
      background-size: 10%;
    }
  }
}
</style>